<template>
	<view>
		<u-navbar title="门店列表" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>
		<view class="content">
			<view class="c-p-10 coreshop-bg-white coreshop-solid-bottom coreshop-display-flex coreshop-align-center">
				<view class="coreshop-display-flex coreshop-align-center c-m-r-10" @click="showAreas=true">
					<text class="c-m-r-2">{{area.label}}</text>
					<u-icon name="arrow-down-fill" color="#612470" size="10"></u-icon>
				</view>
				<u-search 
					placeholder="搜门店" 
					v-model="key" 
					shape="square"
					:show-action="true" 
					:animation="false"
					@clear="clear" 
					@search="storeSearch" 
					@custom="storeSearch">
				</u-search>	
			</view>
			<view v-if="storeList.length>0">
				<view class="coreshop-list" v-for="(item, key) in storeList" :key="key">
					<view class="coreshop-list-item">
						<view class="coreshop-avatar" :style="[{backgroundImage:'url('+ item.logoImage +')'}]" />
						<view class="content">
							<view class="">
								<view class="coreshop-flex coreshop-align-center coreshop-justify-between">
									<view class="coreshop-text-grey">{{item.storeName|| ''}}</view>
									<view class="btn" @click="selectStore(item.id, item.storeName, item.mobile, item.address)">选择</view>
								</view>
								<view class="coreshop-text-yellow coreshop-font-xs">门店营业中</view>
							</view>
							<view class="coreshop-font-sm">
								<view class="coreshop-text-brown">{{item.distanceStr|| ''}}</view>
								<view class="coreshop-text-gray u-line-2">{{item.address|| ''}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 无数据时默认显示 -->
			<view class="coreshop-emptybox" v-else>
				<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/history.png'" icon-size="150"
					text="暂无门店列表" mode="list"></u-empty>
			</view>
		</view>

		<!-- 登录提示 -->
		<coreshop-login-modal></coreshop-login-modal>
		<u-picker :show="showAreas" :columns="areaList" keyName="label" @cancel="showAreas=false" @confirm="onAreae"></u-picker>
	</view>

</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				showAreas: false,
				area:{
					label: '广州市',
					value:440100
				},
				areaList:[
					[{ label: '广州市', value: 440100 },{ label: '佛山市', value: 440600 }, { label: '深圳市', value: 440300 }]
				],
				storeList: [],
				key: '',
				longitude: '',
				latitude: '',
				page: 1,
				limit: 30,
			}
		},
		onLoad() {
			this.getStoreList()
		},
		computed:{ ...mapState(['userStore']), },
		methods: {
			...mapMutations(['setUserStore']),
			onAreae(area){
				this.showAreas = false
				this.area = area.value[0]
				this.page = 1
				this.limit = 30
				this.storeList = []
				this.getStoreList()
			},
			//门店搜索
			storeSearch() {
				this.page = 1
				this.limit = 30
				this.storeList = []
				this.getStoreList()
			},
			clear() {
				this.page = 1
				this.limit = 30
				this.storeList = []
				this.getStoreList()
			},
			//获取门店列表
			getStoreList() {
				let _this = this
				// #ifdef MP-WEIXIN
				wx.getFuzzyLocation({
					type: 'wgs84',
					success(res) {
						_this.latitude = res.latitude
						_this.longitude = res.longitude
						console.log('当前位置的经度1：' + res)
					},
					fail: function() {
						_this.$u.toast('获取您的经纬度坐标失败')
					},
					complete: function(res) {
						if (!_this.longitude || !_this.latitude) {
							_this.longitude = '0'
							_this.latitude = '0'
						}
						let data = {
							'key': _this.key,
							'area': _this.area.value,
							'longitude': _this.longitude,
							'latitude': _this.latitude,
							'page': _this.page,
							'limit': _this.limit,
						}
						_this.$u.api.storeList(data).then(e => {
							if (e.status) {
								console.log(e)
								_this.storeList = [..._this.storeList, ...e.data]
							} else {
								_this.$u.toast('门店数据获取失败。')
							}
						})
					}
				})
				// #endif
				// #ifndef MP-WEIXIN
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						_this.longitude = res.longitude
						_this.latitude = res.latitude
					},
					fail: function() {
						_this.$u.toast('获取您的经纬度坐标失败')
					},
					complete: function(res) {
						if (!_this.longitude || !_this.latitude) {
							_this.longitude = '0'
							_this.latitude = '0'
						}
						let data = {
							'key': _this.key,
							'longitude': _this.longitude,
							'latitude': _this.latitude,
							'page': _this.page,
							'limit': _this.limit,
						}
						_this.$u.api.storeList(data).then(e => {
							if (e.status) {
								console.log(e)
								_this.storeList = [..._this.storeList, ...e.data]
							} else {
								_this.$u.toast('门店数据获取失败。')
							}
						})
					}
				})
				// #endif
			},
			//门店选择
			selectStore(id, name, mobile, address) {
				let _this = this
				this.$u.api.changeStore({ id: id }).then(res=>{
					if(res.code === 0){
						let pages = getCurrentPages()
						let pre = pages[pages.length - 2]
						let store = {}
						store['id'] = id
						store['name'] = name
						store['mobile'] = mobile
						store['address'] = address
						_this.setUserStore(store)
						_this.$db.set('userToken', res.data.auth.token)
						uni.navigateBack({ delta: 1 })
					}
					
				})
				// // #ifdef MP-ALIPAY || MP-TOUTIAO
				// this.$db.set('userStore', store, true);
				// // #endif

				// // #ifdef MP-WEIXIN
				// pre.$vm.store = store
				// // #endif

				// // #ifdef APP-PLUS || APP-PLUS-NVUE
				// pre.store = store
				// // #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "storeList.scss";
</style>
